<template>
	<view class="maincate">
		<view class="cate1">
			<ul class="unilist">
				<li class="uni-list-item">
					<a href="">
						<i class="icon king"></i>
						<span class="text">皇冠待遇安心</span>
					</a>
				</li>
				<li class="uni-list-item">
					<a href="">
						<i class="icon star"></i>
						<span class="text">星级配方放心</span>
					</a>
				</li>
				<li class="uni-list-item">
					<a href="">
						<i class="icon like"></i>
						<span class="text">用心每一天</span>
					</a>
				</li>
			</ul>
		</view>
		<view class="cate">
			<view class="icon" v-for="(icon,index) in iconList" :key="index">
				<view>
					<image :src="icon.url" mode=""></image>
				</view>
				<view class="text"><text>{{icon.text}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'viewcategory',
		data() {
			return {
				iconList: [{
						url: '../../static/cate/1.png',
						iconclass: 'icon-tongzhixiaoxi',
						text: "经典系列"
					},
					{
						url: '../../static/cate/2.png',
						iconclass: 'icon-ziyuan',
						text: "伴手礼"
					},
					{
						url: '../../static/cate/3.png',
						iconclass: 'icon-zhifu',
						text: "女神系列"
					},
					{
						url: '../../static/cate/4.png',
						iconclass: 'icon-ziyuan3',
						text: "棕意手信"
					},
					{
						url: '../../static/cate/5.png',
						iconclass: 'icon-pyq',
						text: "冰淇淋预售"
					},
					{
						url: '../../static/cate/6.png',
						iconclass: 'icon-ziyuan2',
						text: "代金卡兑换"
					},
					{
						url: '../../static/cate/7.png',
						iconclass: 'icon-hongbaoxiaoxi',
						text: "Happy先生优选"
					},
					{
						url: '../../static/cate/8.png',
						iconclass: 'icon-xihuan',
						text: "大礼包兑换"
					}
				]
			}
		},
		methods: {
			init() {

			}

		},
		onLoad: function() {

		}
	}
</script>

<style lang="scss" scoped="">
	a {
		text-decoration: none;
	}

	ul {
		padding: 0;
		margin: 0;
	}

	ul li {
		list-style: none;
	}

	.maincate {
		background: #fff;
		border-radius:0 0 10px 10px;
		box-shadow: 2upx 4upx 6upx 0px #9e9c9c;
	}

	.unilist {
		display: flex;
		width: 93%;
		padding: 13px 0 0 6%;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.uni-list-item {
			width: 33.33%;
		}

		a {
			display: inline-block;
			height: 60upx;
		}

		.icon {
			display: inline-block;
			background-repeat: no-repeat;
			background-size: 19px;
			background-position: 50%;
			width: 19px;
			height: 19px;
			margin-right: 2px;
			vertical-align: middle;
		}

		.king {
			background-image: url("../../static/cate/king.png")
		}

		.star {
			background-image: url("../../static/cate/star.png")
		}

		.like {
			background-image: url("../../static/cate/like.png")
		}

		.text {
			font-size: 24upx;
			color: rgb(38, 202, 211);
		}
	}

	.cate {
		display: flex;
		width: 90%;
		padding: 25upx 5%;
		justify-content: space-between;
		flex-wrap: wrap;

		.icon {
			width: 25%;
			height: 100%;
			padding: 20upx 0;
			text-align: center;

			image {
				width: 64upx;
				height: 64upx;
			}

			.text {
				font-size: 22upx;
				color: #999999;
			}
		}
	}
</style>
